<template>
	<view class="container">
		<u-navbar title="收藏" :autoBack='true' :placeholder="true">
			<view class="u-nav-slot" slot="right">
				<text>管理</text>
			</view>
		</u-navbar>
		<view class="topCon">
			<view class="top-navbar">
				<view :class="currentIndex==1?'active':''" @tap="changeType(1)">医师</view>
				<view :class="currentIndex==2?'active':''" @tap="changeType(2)">机构</view>
			</view>
		</view>
		<view class="content">
			<view v-if="currentIndex==1">
				<physicianList :data="physicianList" @appointment="handleClickAppointment" @open="handleClickOpen">
				</physicianList>
			</view>
			<view v-else>
				<institutionList :data="institutionList" @appointment="handleClickAppointment" @open="handleClickOpen">
				</institutionList>
			</view>
		</view>
		<view class="commonBtn btnCon">
			<view class="checkCon">
				<u-radio-group>
					<u-radio activeColor='#44D4A8' label="全选" @change="radioChange">
					</u-radio>
				</u-radio-group>
				<text>取消</text>
			</view>
			<view class="cancleBtn" @tap="showPop=true">
				<text>取消收藏</text>
			</view>
		</view>
		<!-- 取消弹窗 -->
		<u-popup :show="showPop" mode="center" round="12" @close="showPop=false">
			<view class="canclePop">
				<text class="ccTitle">取消收藏</text>
				<text class="ccDec">确定要取消收藏吗？</text>
				<view class="popBtn">
					<view class="left" @tap="showPop=false">
						<text>我再想想</text>
					</view>
					<view class="right">
						<text>取消收藏</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import baseMixin from "@/mixin/baseMixin.js"
	export default {
		mixins: [baseMixin],
		data() {
			return {
				showPop: false,
				currentIndex: 1,
				dataList: [],
				physicianList: Array.from({
					length: 20
				}, (_, i) => i + 1).map((item) => {
					return {
						"level": "初级师",
						"name": "艾师傅",
						"star": "4.5",
						"address": "东莞",
						"price": "286.00",
						"image": "/static/images/physician-logo.png",
					}
				}),
				institutionList: Array.from({
					length: 20
				}, (_, i) => i + 1).map((item) => {
					return {
						"level": "二甲",
						"name": "东莞市第一人民医院",
						"time": "08:00-12:00 | 02:30-05:30",
						"address": "广东省东莞市东城街道光明新路29号",
						"price": "288",
						"image": "/static/images/institution-logo.png",
					}
				}),
			};
		},
		methods: {
			getDataList(pageNo, pageSize) {

			},
			changeType(val) {
				this.currentIndex = val
			},
			radioChange() {

			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		
		.topCon{
			background-color: #fff;
			height: 128rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			
			.top-navbar {
				position: relative;
				width: 100%;
				display: flex;
				border: 6rpx #EBF7F2 solid;
				padding: 6rpx 6rpx 6rpx 6rpx;
				border-radius: 24rpx;
				background: rgba(235, 247, 242, 1);
			
				>view {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 68rpx;
					width: calc(100% / 2);
					border-radius: 20rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: $theme-color;
					background-color: #EBF7F2;
				}
			
				>view.active {
					color: #FFF;
					font-weight: 500;
					background-color: #44D4A8;
				}
			}
		}

		.content {
			position: relative;
			padding: 24rpx 24rpx 0 24rpx;
			background-color: $page-color-base;
		}

		.btnCon {
			justify-content: space-between;
			font-size: 28rpx !important;

			.checkCon {
				display: flex;
				align-items: center;
				margin-left: 32rpx;

				text {
					margin-left: 48rpx;
				}
			}

			.cancleBtn {
				font-weight: 500;
				color: #fff;
				width: 288rpx;
				height: 88rpx;
				border-radius: 24rpx;
				background: $theme-color;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-right: 32rpx;
			}
		}
	}

	.canclePop {
		position: relative;
		width: 640rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 64rpx;

		.ccTitle {
			height: 48rpx;
			font-size: 32rpx;
			font-weight: bold;
			letter-spacing: 0rpx;
			line-height: 48rpx;
			color: rgba(54, 68, 79, 1);
		}

		.ccDec {
			margin-top: 16rpx;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 48rpx;
			color: rgba(94, 103, 110, 1);
		}

		.popBtn {
			position: relative;
			border-top: 2rpx solid #f5f5f5;
			width: 100%;
			height: 112rpx;
			margin-top: 66rpx;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				border-right: 2rpx solid #f5f5f5;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 48rpx;
				color: rgba(94, 103, 110, 1);
			}

			.right {
				@extend .left;
				border-right: none;
				color: rgba(255, 85, 77, 1);
			}
		}
	}
</style>